<template>
	<view class="fix-item-box">
		<image class="fix-img" :src="activity.cover" mode="aspectFill" @click="goToDetail(activity.id)"></image>
		<view class="fix-content">
			<view class="content-box"  @click="goToDetail(activity.id)">
				<view class="fix-title">
					<image class="fix-type" src="/static/listTag4.png"></image>
					<text class="title-text">{{ activity.name }}</text>
				</view>
				<view class="fix-labels">
					<view class="label" v-for="label of labels">{{ label }}</view>
				</view>
				<view class="fix-row">
					<text class="fix-price" v-if="activity.cost">￥{{ activity.cost }}<text
							class="fix-price-unit">/人</text></text>
					<text class="fix-free" v-if="!activity.cost">免费</text>

					<view class="fix-score">
						<uni-rate :value="3" color="#F6F7F9" active-color="#FFD048" readonly="true" :size="18" />
						<text class="score-text">3.8</text>
					</view>
				</view>
			</view>
			<view class="fix-row">
				<view class="fix-location">
					<image class="location-img" src="/static/listLocation.png"></image>
					<text class="location-text">距你{{ getDistance({latitude: myLocation.latitude, longitude: myLocation.longitude}, {latitude: activity.lat, longitude: activity.lon}) }}</text>
				</view>
				<view class="fix-like" @click="likeActivity()">
					<image class="like-img" :src="activity.isLike ? '/static/listLiked.png' : '/static/listLike.png'"></image>
					<text class="like-num">{{ activity.likeNum ? activity.likeNum : 0 }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "fixItem",
		data() {
			return {
				labels: [],
				myLocation: {}
			};
		},
		props: {
			activity: {}
		},
		watch: {
			activity: {
				handler: function(val) {
					if (val) {
						this.labels = val.labels.split(',');
					}
				},
				immediate: true,
				deep: true,
			}
		},
		mounted() {
			this.myLocation = this.$myLocation;
		},
		methods: {
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/activityDetail?id=${id}`
				})
			},
			getDistance(p1, p2) {
				var radLat1 = p1.latitude * Math.PI / 180.0;
				var radLat2 = p2.latitude * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = p1.longitude * Math.PI / 180.0 - p2.longitude * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math
					.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10;
				let res = '';
				if (s > 1000) {
					res = (s / 1000).toFixed(1) + '公里';
				} else {
					res = s + '米';
				}
				return res;
			},
			likeActivity() {
				if (!this.activity.isLike) {
					const params = {
						activityId: this.activity.id,
						isLike: 1
					}
					this.$apis.likeOrJoinActivity(params).then(res => {
						if (res.code === 0) {
							uni.$emit('nearlyLikeActivity', this.activity);
							uni.showToast({
								title: '成功!',
								icon: 'success'
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.fix-item-box {
		width: calc(100vw - 64rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 32rpx 24rpx 32rpx;

		.fix-img {
			width: 280rpx;
			height: 220rpx;
			border-radius: 28rpx;
		}

		.fix-content {
			width: 380rpx;
			height: 220rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			
			.content-box {
				width: 100%;
			}

			.fix-title {
				width: 100%;
				position: relative;
				line-height: 30rpx;

				.fix-type {
					width: 60rpx;
					height: 28rpx;
					margin-right: 6rpx;
					position: absolute;
					top: 2rpx;
				}

				.title-text {
					width: 100%;
					margin-left: 70rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #222222;
					diaplay: inline-block;
				}
			}

			.fix-labels {

				.label {
					display: inline-block;
					padding: 2rpx 8rpx 2rpx 8rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #666666;
					background: #F6F7F9;
					border-radius: 15rpx;
					margin-right: 8rpx;
				}
			}

			.fix-row {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.fix-price {
					font-size: 32rpx;
					font-weight: bold;
					color: #FF5E2E;

					.fix-price-unit {
						font-size: 20rpx;
					}
				}

				.fix-free {
					font-size: 28rpx;
					font-weight: bold;
					color: #31B57E;
				}

				.fix-score {
					display: flex;
					align-items: center;

					.score-text {
						font-size: 28rpx;
						font-weight: bold;
						color: #FF5E2E;
						margin-left: 8rpx;
					}
				}

				.fix-location {
					display: flex;
					align-items: center;

					.location-img {
						width: 20rpx;
						height: 23rpx;
					}

					.location-text {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-left: 6rpx;
					}
				}

				.fix-like {
					display: flex;
					align-items: center;

					.like-img {
						width: 32rpx;
						height: 28rpx;
					}

					.like-num {
						width: 50rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						text-align: end;
					}
				}
			}
		}
	}
</style>
